<script setup>
import {ref} from "vue";
import axios from "@/request.js";

const pointsEvents = ref([]);

const count = ref(3)
const loading = ref(false)
const noMore = ref(false)

//获取积分出入事件
const getPointsEvents = () => {
  loading.value = true
  setTimeout(() => {
    count.value += 2
    loading.value = false

    if (count.value >= pointsEvents.value.length) {
      noMore.value = true;
    }
  }, 2000)

  axios.get("/pointsManager/getAllPointsEvent").then(resp => {
    pointsEvents.value = resp.date;
  })

};
</script>

<template>
  <div class="common-layout">
  <el-container>
    <el-header style="font-size: 18px">管理积分</el-header>
    <el-main>
      <div>
        <el-button type="primary" @click="getPointsEvents">获取积分出入事件</el-button>
      </div>

      <div class="infinite-list-wrapper" style="overflow: auto">
        <li v-for="(list, index) in pointsEvents" :key="index" class="list-item">
          <span>{{list.username}}</span>
          <span>{{ list.eventTime }}</span>
          <span>{{ list.event }}</span>
          <span>{{ list.points }}</span>
        </li>
        <p v-if="loading">Loading....</p>
        <p v-if="noMore">No more</p>
      </div>
    </el-main>
  </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  padding: 20px;
}

.infinite-list-wrapper {
  margin-top: 30px;
  width: 600px;
  height: 300px;
  text-align: center;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}

.list-item span{
  margin: 0 15px 0 15px;
}
</style>